﻿<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north',border:false" style="height: 140px; border-bottom-width: 1px; padding: 10px; font-size: 14px;">
        <a class="easyui-linkbutton" data-options="iconCls:'icon-search'" href="/Tabs/ViewOperateTabSource" target="_blank">点击查看扩展代码</a>
        <br />
        js依赖项：
        <br />
        [query-1.11.0.js]、[jquery.jdirk.js]、[jquery.easyui.min.js]、[jeasyui.extensions.base.loading.js]、[jeasyui.extensions.messager.progress.js]、
        [jeasyui.extensions.tabs.operateTab.js]

        <br /><br />
        css依赖项：
        <br />
        [jeasyui.extensions.base.css]
    </div>
    <div data-options="region:'center',border:false,title:'此处仅显示“功能演示”选项卡所示功能基于本扩展的实现源码'" style="padding: 15px; font-size: 14px;">
        <a href="~/Demos/ExtensionDemos/Tabs/OperateTabDemo.zip" target="_self">下载本扩展功能演示Demo</a>
        <br />
        <div style="font-size: 17px; font-weight: bold; margin-top: 15px;margin-bottom:10px;">
            扩展属性API
        </div>
        <table class="tableAPI">
            <tr class="title">
                <td style="width:20%;">名称</td>
                <td style="width: 10%;">类型</td>
                <td>描述</td>
                <td style="width: 7%;">默认值</td>
            </tr>
            <tr>
                <td>lineheight</td>
                <td>Number 类型</td>
                <td>
                    该属性表示当前选项卡标题栏和选项卡的 pane-body 之间的空白区域高(宽)度(px)；
                </td>
                <td>2</td>
            </tr>
            <tr>
                <td>loading</td>
                <td>String 类型</td>
                <td>
                    该属性表示当 easyui-tabs 组件加载 panel 时，显示的遮蔽层进度条类型。可选的值限定范围如下：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"mask": 表示遮蔽层 mask-loading 进度显示，默认值<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"progress": 表示调用 $.messager.progress 进行进度条效果显示<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"none": 表示不显示遮蔽层和进度条
                </td>
                <td>mask</td>
            </tr>
            <tr>
                <td>loadMsg</td>
                <td>String 类型</td>
                <td>
                    该属性表示当 easyui-tabs 组件加载 panel 时，显示的遮蔽层提示文字内容。
                </td>
                <td>正在加载数据，请稍等...</td>
            </tr>
            <tr>
                <td>onBeforeRefresh</td>
                <td>Function 类型</td>
                <td>
                    当调用 easyui-tabs 的 refresh 方法前，将触发该事件。如果该事件函数返回 false，将中断 refresh 方法的执行。<br />
                    该事件回调函数签名中定义如下参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>title: 表示刷新的 tab-panel 的标题 title 值<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>index: 表示刷新的 tab-panel 的索引号
                </td>
                <td>空</td>
            </tr>
            <tr>
                <td>onRefresh</td>
                <td>Function 类型</td>
                <td>
                    当调用 easyui-tabs 的 refresh 方法后，将触发该事件。<br />
                    该事件回调函数签名中定义如下参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>title: 表示刷新的 tab-panel 的标题 title 值<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>index: 表示刷新的 tab-panel 的索引号
                </td>
                <td>空</td>
            </tr>
            <tr>
                <td>onBeforeMove</td>
                <td>Function 类型</td>
                <td>
                    当调用 easyui-tabs 的 move 方法前，将触发该事件。如果该事件函数返回 false，将中断 move 方法的执行。<br />
                    该事件回调函数签名中定义如下参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>target: html-DOM 类型值，表示移动目标位置的 tab-panel 的 DOM 对象；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>source: html-DOM 类型值，表示要移动的 tab-panel 的 DOM 对象；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>point : 移动到目标位置的方式，String 类型值，仅限于定义为如下值：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"before":   表示把 source 选项卡移动至 target 选项卡的前面，默认值；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"after":    表示把 source 选项卡移动至 target 选项卡的后面；
                </td>
                <td>空</td>
            </tr>
            <tr>
                <td>onMove</td>
                <td>Function 类型</td>
                <td>
                    当调用 easyui-tabs 的 move 方法后，将触发该事件。<br />
                    该事件回调函数签名中定义如下参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>target: html-DOM 类型值，表示移动目标位置的 tab-panel 的 DOM 对象；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>source: html-DOM 类型值，表示要移动的 tab-panel 的 DOM 对象；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>point : 移动到目标位置的方式，String 类型值，仅限于定义为如下值：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"before":   表示把 source 选项卡移动至 target 选项卡的前面，默认值；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"after":    表示把 source 选项卡移动至 target 选项卡的后面；
                </td>
                <td>空</td>
            </tr>
        </table>
        <div style="font-size: 17px; font-weight: bold; margin-top: 15px;margin-bottom:10px;">
            扩展方法API
        </div>
        <table class="tableAPI">
            <tr class="title">
                <td style="width:15%;">名称</td>
                <td style="width:5%;">重写</td>
                <td style="width:10%;">参数</td>
                <td>描述</td>
            </tr>
            <tr>
                <td>add</td>
                <td>是</td>
                <td>options</td>
                <td>
                    重写 easyui-tabs 的原生方法 add，以支持扩展的功能；<br />
                    返回值：返回表示当前选项卡控件 easyui-tabs 的 jQuery 链式对象。
                </td>
            </tr>
            <tr>
                <td>update</td>
                <td>是</td>
                <td>param</td>
                <td>
                    重写 easyui-tabs 的原生方法 update，以支持扩展的功能；<br />
                    返回值：返回表示当前选项卡控件 easyui-tabs 的 jQuery 链式对象。
                </td>
            </tr>
            <tr>
                <td>insert</td>
                <td>否</td>
                <td>param</td>
                <td>
                    在当前 easyui-tabs 组件上创建一个新的选项卡，并将其移动至指定选项卡的前一格位置；该方法的参数 param 为包含如下属性的 JSON-Object 对象：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>options:  表示要创建的新选项卡的属性；是一个 JSON-Object 对象；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>该对象的各项属性参考 easyui-tabs 中 add 方法的参数 options；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>which : Number、String、jQuery 或 DOM 类型值，表示移动位置的 tab-panel 的索引号、标题 title 值或 jQuery 对象、DOM 对象；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>point : 表示新选项卡插入的位置，String 类型值，仅限于定义为如下值：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"before":   表示把新选项卡移动至 which 选项卡的前面，默认值；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"after":    表示把新选项卡移动至 which 选项卡的后面；<br />
                    返回值：返回表示当前选项卡控件 easyui-tabs 的 jQuery 链式对象。
                </td>
            </tr>
            <tr>
                <td>move</td>
                <td>否</td>
                <td>param</td>
                <td>
                    将指定的 easyui-tabs tab-panel 选项卡页移动至另一位置；该方法的参数 param 为包含如下属性的 JSON-Object 对象：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>target: Number、String、jQuery 或 DOM 类型值，表示移动目标位置的 tab-panel 的索引号、标题 title 值或 jQuery 对象、DOM 对象；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>source: Number、String、jQuery 或 DOM 类型值，表示要移动的 tab-panel 的索引号、标题 title 值或 jQuery 对象、DOM 对象；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>point:  移动到目标位置的方式，String 类型值，仅限于定义为如下值：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"before":   表示把 source 选项卡移动至 target 选项卡的前面，默认值；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"after":    表示把 source 选项卡移动至 target 选项卡的后面；<br />
                    返回值：返回表示当前选项卡控件 easyui-tabs 的 jQuery 链式对象。
                </td>
            </tr>
            <tr>
                <td>refresh</td>
                <td>否</td>
                <td>which</td>
                <td>
                    刷新指定的选项卡；该方法定义如下参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>which:  表示被刷新的选项卡的 索引号（从 0 开始计数） 或者 标题。<br />
                    返回值：返回表示当前选项卡控件 easyui-tabs 的 jQuery 链式对象。
                </td>
            </tr>
            <tr>
                <td>loading</td>
                <td>否</td>
                <td>无</td>
                <td>
                    显示 easyui-tabs 组件的选项卡页面加载状态遮罩层；<br />
                    返回值：返回表示当前选项卡控件 easyui-tabs 的 jQuery 链式对象。
                </td>
            </tr>
            <tr>
                <td>loaded</td>
                <td>否</td>
                <td>无</td>
                <td>
                    关闭 easyui-tabs 组件的选项卡页面加载状态遮罩层；<br />
                    返回值：返回表示当前选项卡控件 easyui-tabs 的 jQuery 链式对象。
                </td>
            </tr>
        </table>
        <div style="font-size: 17px; font-weight: bold; margin-top: 15px;margin-bottom:10px;">
            tab-panel扩展属性API
        </div>
        <table class="tableAPI">
            <tr class="title">
                <td style="width:15%;">名称</td>
                <td style="width: 10%;">类型</td>
                <td>描述</td>
                <td style="width: 7%;">默认值</td>
            </tr>
            <tr>
                <td>refreshable</td>
                <td>Boolean 类型</td>
                <td>
                    表示该选项卡是否具有刷新功能
                </td>
                <td>true</td>
            </tr>
            <tr>
                <td>closeOnDblClick</td>
                <td>Boolean 类型</td>
                <td>
                    表示双击选项卡标题是否能将其关闭，当该选项卡 closable: true 时，该属性有效。
                </td>
                <td>true</td>
            </tr>
            <tr>
                <td>iniframe</td>
                <td>Boolean 类型</td>
                <td>
                    表示该选项卡是否在 iframe 中打开。<br />
                    其核心扩展由 jeasyui.extensions.panel.iframe.js 实现。因此要使 iniframe 属性生效，请引用相应的 js 及 css。
                </td>
                <td>false</td>
            </tr>
        </table>
    </div>
</div>
